
<template>
  <div class="payment-details">
    <div class="header">
      <h2>支付详情</h2>
      <div class="btn-group">
        <el-button type="text" @click="handleDetail" icon="el-icon-refresh-right">返回</el-button>
      </div>
    </div>
  <hr />
  <div class="payment-detail-item">

    <p class="detail-value">反馈人：{{ paymentDetails.cname}}</p>

    <p class="detail-value">手机号码：{{ paymentDetails.phone }}</p>

    <p class="detail-value">来源：{{ paymentDetails.source==1?'安卓端IOS':paymentDetails.source==2?'会员端-安卓':'未知'}}</p>

    <p class="detail-value">处理状态：{{ paymentDetails.processingStatus==1?'未处理':paymentDetails.processingStatus==2?'跟进中':'已完结' }}</p>

    <p class="detail-value">反馈内容：{{ paymentDetails.feedbackContent}}</p>
    <el-image :src="src" style="width: 100px; height: 100px"/>&nbsp;
    <el-image :src="src" style="width: 100px; height: 100px"/>&nbsp;
    <el-image :src="src" style="width: 100px; height: 100px"/>

    <p class="detail-value">联系方式：{{ paymentDetails.contactWay }}</p>

    <p class="detail-value">反馈时间：{{ paymentDetails.feedbackTime }}</p>
    <p class="detail-value" v-show="paymentDetails.processingStatus==2||paymentDetails.processingStatus==3">回复内容：{{ paymentDetails.replyContent }}</p>

    <p class="detail-value" v-show="paymentDetails.processingStatus==2||paymentDetails.processingStatus==3">回复时间：{{ paymentDetails.replyTime }}</p>

    <p class="detail-value" v-show="paymentDetails.processingStatus==2||paymentDetails.processingStatus==3">补充反馈：{{ paymentDetails.addFeedback }}</p>

      <el-form ref="form" :model="form" v-show="paymentDetails.processingStatus==1">
        <el-form-item label="是否需要跟进" prop="needFollowUp">
          <el-radio-group v-model="form.needFollowUp">
          <el-radio  :label="1" >继续跟进</el-radio>
          <el-radio  :label="2" >反馈完结</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回复内容" prop="replyContent">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.replyContent" style="width: 400px">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="paymentDetails.processingStatus==1">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

  </div>

</div>
</template>

<script >

import {getFeedback, updateFeedbackById } from '@/api/feedback/feedback'
 export default {
  name: "Details",
  data() {
    return {
      src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      id:"",
      paymentDetails:[],
      form:{

      }
    }
  },
   created() {
    const id = this.$route.params && this.$route.params.Id;
     getFeedback(id).then(response => {
        this.paymentDetails = response.data;
      });
       this.reset();
       getFeedback(id).then(response => {
         this.form = response.data;
       });
  },
  methods: {
    reset() {
      this.form = {
        id: null,
        needFollowUp: null,
        replyContent: null
      }
    },
    cancel(){
      this.$router.push({path:"/feedback/feedback"});
    },

    submitForm() {
    this.$refs["form"].validate(valid => {
      if (valid) {
        if (this.form.id != null) {
          updateFeedbackById(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      }
    });
    },
    handleDetail() {
      this.$router.push({path:"/feedback/feedback"}); // 假设支付列表页面的路由名称为 '支付列表'
    }
  }
 }
</script>

<style >
.payment-details {
  width: 1000px;
  border: 1px solid #ccc;
  padding: 20px;
}

.payment-detail-item {
    margin: 10px 0;
    padding: 5px;
}
.detail-value {
    font-size: 16px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.btn-group{
  display: flex;
  justify-content: flex-end; /* 将按钮放在最右端 */
  margin-bottom: 10px; /* 调整与标题之间的间距 */
}
</style>
